<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" />
<meta name="copyright" content="">
<meta name="author" content="">
<title>国际快速择校</title>
<!-- <link rel="stylesheet" href="./static/css/style.css"> -->
<link rel="stylesheet" href="./static/css/element-ui.css">
<script src="./static/js/basic.js"></script>
<script src="./static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./static/js/swiper-4.5.3.min.js"></script>
<link rel="stylesheet" href="./swiper/swiper.min.css" />
<script src="./static/js/element-ui.js"></script>
<script src="./static/js/js.js"></script>
</head>

<body class="redbody">
  <div id="app" class="gj-kszx">
    <my-header :type="3">
      <div class="gj-kszx-top">
        <div class="box">
          <div class="flex-bect top ov">
            <span class="fl tit">{{title}}</span>
            <div class="form flex-bect">
              <input type="text" class="input" v-model="keywords" placeholder="请输入学校名称搜索">
              <span class="btn cur inbk" @click="submit">搜索</span>
            </div>
          </div>
          <div class="flex-lect bottom">
            <div class="item flex-lect">
              <span class="sp">热门城市</span>
              <el-select v-model="form.city" placeholder="请选择">
                <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div class="item flex-lect">
              <span class="sp">招生对象</span>
              <el-select v-model="form.duix" placeholder="请选择">
                <el-option v-for="item in duixList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div class="item flex-lect">
              <span class="sp">寄宿性质</span>
              <el-select v-model="form.jsxz" placeholder="请选择">
                <el-option v-for="item in jsxzList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div class="item flex-lect">
              <span class="sp">学费范围</span>
              <el-select v-model="form.fee" placeholder="请选择">
                <el-option v-for="item in feeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="gj-kszx-list">
        <div class="box" v-if="list">
          <a v-for="(item, index) in list" :key="index" :href="router.gjDetail+'?id='+item.id" class="item flex-bect">
            <div class="school-logo"><img :src="item.logo" alt="" class="img"></div>
            <div class="w2 flex1">
              <div class="flex-bect top">
                <div class="div1">
                  <div class="name">{{item.name}}</div>
                  <div class="labs flex-lect">
                    <span v-for="(lab, k) in item.nianji" :key="k" class="lab" :class="'lab'+k">{{lab}}</span>
                  </div>
                </div>
                <div class="div2 flex-bect">
                  <div class="li"><span class="sp">学校性质：</span><b>{{item.nature}}</b></div>
                  <div class="li"><span class="sp">课程体系：</span><b>{{item.kctx}}</b></div>
                  <div class="li"><span class="sp">校车情况：</span><b>{{item.car}}</b></div>
                  <div class="li"><span class="sp">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费：</span><b>{{item.fee}}</b></div>
                </div>
              </div>
              <div class="intro">{{item.intro}}</div>
            </div>
            <div class="line"></div>
            <div class="w3">
              <span class="btn">进入学校</span>
              <div class="address inbk">{{item.address}}</div>
            </div>
          </a>
          
          <div class="flex-ct page"><el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination></div>
        </div>
      </div>
      
    </my-header>
  </div>
  <style>
    body{background-color: #F3F3F7;}
  </style>
  <script type="text/babel">
    let router = getPath(); // 所有路径
    var time = new Date().getTime();
    let mySwiper1 = null;//销毁实例
    new Vue({
      el: '#app',
      components: {
        'my-header': httpVueLoader('./components/header.vue?time='+time),
        'gj-main1': httpVueLoader('./components/gj_main1.vue?time='+time),
        'gj-main2': httpVueLoader('./components/gj_main2.vue?time='+time),
        'gj-main3': httpVueLoader('./components/gj_main3.vue?time='+time),
        'gj-tit1': httpVueLoader('./components/gj_tit1.vue?time='+time),
        'hot-zt': httpVueLoader('./components/hot_zt.vue?time='+time),
        'hot-zt': httpVueLoader('./components/hot_zt.vue?time='+time),
        
      },
      data:{
        router:router, // 路径
        keywords:"", // 关键字
        total:200,
        list:null,
        form:{
          city:1,
          duix:1,
          jsxz:1,
          fee:1
        },
        cityList:[{id:1, name:"全部"},{id:2, name:"北京"},{id:3, name:"上海"},{id:4, name:"广州"},{id:5 ,name:"天津"}],
        duixList:[{id:1, name:"全部"},{id:2, name:"小学"},{id:3, name:"初中"},{id:4 ,name:"高中"}],
        jsxzList:[{id:1, name:"全部"},{id:2, name:"有"},{id:3, name:"无"}],
        feeList:[{id:1, name:"全部"},{id:2, name:"5万以内"},{id:3, name:"5-10万"},{id:4, name:"10万以上"}],
        title:""
        
      },
      mounted() {
        this.getCon();
        console.log('222222->',getId('type'))
        if(getId('type') == 2){
          this.title="私立学校院校库"
          $('title').text(this.title);
        }else{
          this.title="国际学校院校库"
          $('title').text(this.title);
        }
      },
      
      methods: {
        // 翻页
        handleCurrentChange(e){
          console.log('翻页', e)
        },
        // 搜索
        submit(){
          console.log('搜索功能')
        },
        getCon(){
          
          // 这里的数据是假的  请通过接口获取
          const item = {
            name:"天津黑利伯瑞国际学校", 
            intro:"黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校。学校拥有北京首创集团雄厚财力的支持雄厚财力的支持",
            nature:"国际学校", //
            kctx:"澳大利亚课程",
            car:"有校车",
            fee:"15.5~22万/年 ",
            address:"天津市武清区",
            nianji:['小学', '初中', '高中', '幼儿园'],
            logo:"./static/image/nav/gj-logo7.png"
          }
          this.list = [
            {id:1, ...item},{id:2, ...item},{id:3, ...item},{id:4, ...item},{id:5, ...item},{id:6, ...item},{id:7, ...item},{id:8, ...item}
          ]
        }
      }
    })
  </script>
  
  
  <link rel="stylesheet" href="./static/animation/animate.min.css" />
  <script type="text/javascript" src="./static/animation/wow.min.js"></script>
  <script>
      var wow = new WOW({
          boxClass: 'wow',
          animateClass: 'animated',
          offset: 0,
          mobile: false,
          live: true
      });
      wow.init();
  </script>
  
</body>
</html>